<template>
	<div ref="navbar" style="width: 240px;">
		<el-header>
			<el-menu
				mode="horizontal" 
				background-color="#FFFFFF"
				text-color="#606266">
				<el-menu-item class="hidden-md-and-down logo">
					<router-link :to="{path:'/'}">
						{{ projectName }}
					</router-link>
				</el-menu-item>
				<el-menu-item @click="changeCollapse()">
					<div title="折叠菜单">
						<i class="el-icon-s-fold"></i>
					</div>
				</el-menu-item>
				<el-menu-item data-v-step="1" @click="lockScreen()">
					<div title="锁屏">
						<i class="el-icon-lock"></i>
					</div>
				</el-menu-item>
				<el-menu-item data-v-step="2" class="refresh-box hidden-md-and-down" @click="refresh()">
					<div title="刷新">
						<i class="el-icon-refresh"></i>
					</div>
				</el-menu-item>
				<el-menu-item data-v-step="3" class="screen-full-box hidden-md-and-down" @click="isScreenFull()">
					<div title="全屏">
						<i class="el-icon-full-screen"></i>
					</div>
				</el-menu-item>
				<el-submenu index="1" style="float: right;">
					<template slot="title">
						<el-avatar
							shape="circle"
							size="large">
							User
						</el-avatar>
					</template>
					<el-menu-item index="1-1">
						<i class="el-icon-user"></i>我的信息
					</el-menu-item>
					<el-menu-item index="1-2" @click.native="logout()">
						<i class="el-icon-switch-button"></i>退出
					</el-menu-item>
				</el-submenu>
			</el-menu>
		</el-header>
		<!-- 左侧菜单栏 -->
		<ves-sidebar :collapse="collapse" @handleCollapse="handleCollapse"></ves-sidebar>
		<!-- 锁屏 -->
		<el-dialog title="设置锁屏密码" width="30%" :close-on-click-modal="false" :visible.sync="dialogVisible">
			<el-form ref="form" :model="form" :rules="rules" @submit.native.prevent>
				<el-form-item label="密码" prop="lockPassword">
					<el-input type="password" v-model="form.lockPassword"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit('form')">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { removeAll,getUserInfo,setLock } from '../utils/permission'
	import { encrypt } from '../utils/secret'
	import screenfull from "screenfull"
	import Sidebar from './Sidebar.vue'
	export default {
		name: 'Navbar',
		components: {
			'ves-sidebar': Sidebar
		},
		data () {
			return {
				userInfo: JSON.parse(getUserInfo()),
				collapse: false,
				dialogVisible: false,
				form: {},
				rules: {
					lockPassword: [
						{ required: true, message: '请输入锁屏密码', trigger: ['blur', 'change'] }
					]
				}
			}
		},
		methods: {
			// 监测是否移动端设备
			_isMobile() {
				let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
				return flag;
			},
			// 接受处理子组件传递的值
			handleCollapse(result) {
				this.collapse = result;
				if (this.collapse) {
					this.$nextTick(() => {
						this.$refs.navbar.style.width = '64px';
					});
				} else {
					this.$nextTick(() => {
						this.$refs.navbar.style.width = '240px';
					});
				}
			},
			// 切换菜单栏
			changeCollapse() {
				if (!this.collapse) {
					this.collapse = true;
					if (!this._isMobile()) {
						this.$refs.navbar.style.width = '64px';
					}
				} else {
					this.collapse = false;
					if (!this._isMobile()) {
						this.$refs.navbar.style.width = '240px';
					}
				}
			},
			// 锁屏
			lockScreen() {
				this.dialogVisible = true;
			},
			// 提交
			onSubmit(form) {
				this.$refs[form].validate((valid) => {
					let _this = this;
					if (valid) {
						let lockPassword = encrypt(this.form.lockPassword);
						setLock(lockPassword); //存入加密的锁密码
						_this.dialogVisible = false;
						_this.$router.push('/lock');
					}
				});
			},
			// 刷新页面
			refresh() {
				location.reload();
			},
			// 切换全屏
			isScreenFull() {
				if (!screenfull.isEnabled) {
					// 如果不支持进入全屏，发出不支持提示
					this.$message({
						message: "您的浏览器版本过低不支持全屏显示！",
						type: "warning"
					});
					return false;
				}
				screenfull.toggle();
			},
			// 退出登录
			logout() {
				if (this._isMobile()) {
					removeAll();
					this.$router.push('/login');
				} else {
					this.$confirm('请确认是否退出登录？', '提示', {})
						.then(() => {
							removeAll();
							this.$router.push('/login');
						})
					.catch(() => { });
				}
			}
		}
	}
</script>
